<template>
	
	<view class="content">
		
		<view class="goods_banner_box">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="2000" duration="500">	
				<block v-for="(item, index) in images" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<image class="swiper-img" :src="item"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		
		<view class="goods_info_box">
			<view class="goods_price">免费订购</view>
			<view class="goods_name">MAGIC DRAGON魔杰龙轻柔倍适学步裤</view>
			
			<view class="tip_box">
				<view class="goods_tip_box">
					<view class="goods_tip_name2">
						<image class="quanImg" src="@/static/img/quan.png"></image>
					</view>
					<view class="goods_tip_name1">
						<image class="tianImg" src="@/static/img/30tian.png"></image>
					</view>
				</view>
				<!-- <view class="right_icon"></view> -->
			</view>
		</view>
		
		<view class="coupon_box" @click="openShow('counp')">
			<view class="coupon_name">优惠</view>
			<view class="coupon_right_box">
				<view class="coupon_ri_name">满200减20优惠</view>
				<view class="right_icon"></view>
			</view>
		</view>
		
		<view style="width: 692upx;">
			<u-line color="#F7F7F7"></u-line>
		</view>
			
		<view class="sefic_box" @click="openShow('shopSefic')">
			<view class="sefic_box_bac">
				<view class="sefic_name">规格</view>
				<!-- <view class="sefic_son_box">
					<view class="sefic_choose">已选：学习步裤</view>
					<view class="sefic_size">L码</view>
				</view> -->
			</view>
			
			<view class="rig_boxox">
				<view class="sefic_size">{{seficeName}}</view>
				<view class="right_icon"></view>
			</view>
			
		</view>
		
		<view class="product_box">
			<view class="pro_name">产品参数</view>
			<view class="pro_box_sefig">
				<block v-for="(item, index) in Goodsparams" :key="index">
					<view class="pro_sefic_box">
						<view class="pro_s_name">{{item.name}}</view>
						<view class="pro_s_name">{{item.value}}</view>
					</view>
				</block>
			</view>
		</view>
	
		<view class="goods_show_name">商品展示</view>
		
		<!-- 商品详情 起-->
		<view class="contasda">
			<u-parse :content="content" :tagStyle="style"></u-parse>
		</view>
		<!-- 商品详情 终-->
		
		
		<!-- 底部固定下单按钮 起-->
		<view class="goto_pay">
			<view class="goto_pay_button_box">
				<view class="car_img_li">
					<view class="shor_car_box" @click="shopCarShow_button" >
						<view class="car_img_box_kefu">
							<image class="car_img_kefu" src="@/static/img/goodsdatil/kefu.png"></image>
						</view>
						
						<view class="car_name" >客服</view>
					</view>				
					<view class="shor_car_box" @click="gotopage('ShopCar')" >
						<view class="car_img_box">
							<image class="car_img" src="@/static/img/index_shopCar.png"></image>
						</view>
						<view class="car_name" >购物车</view>
					</view>
				</view>			
				<view class="add_car1" @click="gotopage('order_jiesuan')">立即订购</view>
			</view>
		</view>
		<!-- 下单按钮 终-->
		
		<!-- 占位 -->
		<view class="zhanwei"></view>
		
		<!-- 商品详情、规格弹窗 起-->
		<u-popup 
			:show="shopCarShow"
			@close="shopCarShow = false" 
			:closeable="true"
		>
			<view>
				<view class="goods_take_box">
					<view class="take_g_img_box">	
						<view class="t_g_img_box">
							<image class="t_g_img" :src="ImageM"></image>
						</view>
						<view class="t_goods_info_box">
							<view class="t_goods_price">{{price}}</view>
							<view class="t_goods_name">{{title}}</view>		
							<view class="t_goods_choose">已选：2XL</view>
						</view>
					</view>
					<!-- :class="{'size_name_choose': s_indexs == indexs && p_index == index}" -->
					<block v-for="(item,index) in sku" :key="index">
						<view class="t_size_name">{{item.name}}</view>
						<view class="t_size_list">
							<block v-for="(items, indexs) in item.son" :key="indexs">
								<view class="size_name"
									:class="{'size_name_choose': items.select == 1}"
									@click="ClickChoose(item.id, items.sid, index ,indexs)"
								>{{items.sname}}</view>
							</block>
						</view>
					</block>
					<view class="line"></view>
					
					<view class="buy_box">
						<view class="buy_name_box">购买数量</view>
					
						<view class="buy_number_box">
							<u-number-box 
								name="sfiec"
								v-model="buy_number" 
								@change="valChange"
								buttonSize="23"
								inputWidth="30"
								:disabledInput="true"
							></u-number-box>
						</view>
					</view>
					
					<view class="buy_toPay_button" v-if="ShopCarButtonClick" @click="clickButton('ShopCar')">加入购物车</view>
					<view class="buy_toPay_button" v-if="!ShopCarButtonClick">立即下单</view>
				</view>
			</view>
		</u-popup>
		<!-- 商品详情、规格弹窗 终-->
		
		<!-- 优惠劵弹窗 起 -->
		<u-popup
			:show="Is_counp_show"
			@close="Is_counp_show = false"
		>
			<view class="boday_hie">
				<view class="body_dadtitle">优惠劵</view>
				<view class="boday_counfd">
					<block v-for="(item, index) in 4" :key="index">
						<view class="counp_list_box">
							<view class="counp_box_img">
								<image class="counp_img" src="@/static/img/counp/counp_bak.png"></image>
							</view>
							
							<view class="counp_text_info_box">
								<view class="counp_box_money">
									<view class="counp_money">
										<text class="money1">￥</text>
										<text class="money2">20</text>
									</view>
									<view class="moeny_text_bac">每月订单可用</view>
								</view>
								
								<view class="counp_rig_box_x">
									<view class="counp_rig_box_text">
										<view class="counp_send_text">运费抵用卷</view>
										<view class="counp_send_text1">2021.07.30 - 2021—08-30</view>
									</view>
									<view class="counp_buton_box">使用</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="cloer_oadha">
					<view class="button_box_cuinp_c" @click="Is_counp_show = false">关闭</view>
				</view>
			</view>
		</u-popup>
		<!-- 优惠劵弹窗 终 -->
		
		
		<!-- 用户是否登陆 起 -->
		<u-popup 
			:show="Is_login_show" 
			mode="center"
		>
			<view>
				<view class="tan_modle">
					<view class="tan_title">确认是否订购</view>
					<view>
						<u-line></u-line>
						<view class="tan_button">
							<u-button text="取消" :plain="true" :hairline="false" @click="Is_login_show = false"></u-button>
							<u-button text="确认" type="primary" :plain="true" @click="gotopage_son"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 用户是否登陆 终 -->
		
	</view>
</template>

<script>
	import HostConfig from '@/utils/host.js';
	import Host from '@/utils/api.js';
	export default {
		data(){
			return{
				shopCarShow: false,		// 购物车弹窗显示
				Is_counp_show: false,   // 优惠劵弹窗显示
				addGoodsValue: 1,		// 购物车加购数量
				Is_login_show: getApp().globalData.LoginStatus,	// 判断用户是否已经登陆
				images: [],	//商品详情轮播图
				ImageM: [], //商品主图
				Goodsparams: [], // 商品唱片参数
				content: '',//商品详情
				price: 138.00,//商品价格
				sku:[],//商品规格
				s_indexs: null,//规格选中之后背景色的显示和边框的显示
				p_index: null,//规格选中之后背景色的显示和边框的显示
				title: 'MAGIC DRAGON魔杰龙轻柔倍适纸尿裤',
				buy_number: 1,//商品加购数量 步计器
				seficeName: '请选择规格',
				goods_sku_ids: [], //记录用户选择了哪些规格的id
				ShopCarButtonClick: false, //判断用户是否是点击加入购物车的按钮
				style: {
					// 字符串的形式
					p: 'color: red;font-size:32rpx',
					// span: 'font-size: 30rpx',
					img: 'width:100%!important;vertical-align:middle;'
				},//商品详情
			}
		},
		onLoad(data_id) {
			let that = this;
			uni.login({
			  provider: 'weixin',
			  success: function (loginRes) {
				uni.request({
				    url: Host.ApiGetOpenid.url, //获取用户openid接口
					method: 'GET',
				    data: {
				        code: loginRes.code,
				    },
				    success: (res) => {
						console.log(res.data.openid);
						uni.request({
						    url: Host.ApiGetCouponList.url, //获取用户可用优惠劵地址接口
							method: 'GET',
						    data: {
						        openid: res.data.openid
						    },
						    success: (res) => {
								console.log(res)
						    }
						});
				    }
				});
			  }
			});
			
			that.goods_id = data_id.goods_id;
			uni.request({// 获取商品详情
				url: Host.ApiGetGoodDetail.url, //仅为示例，并非真实接口地址。
				method: 'GET',
				data: {
					goods_id: data_id.goods_id,
				},
				success: (res) => {			
					let hostUrl = HostConfig.service.host;
					var list = res.data.data;
					list.map((value, index) =>{
						that.images = value.images; //商品详情轮播图
						that.Goodsparams = value.params;//商品产品参数
						that.content = value.content;
						that.ImageM = value.image; // 商品主图
						that.price = value.price; //商品价格
						that.title = value.title; //商品名称
						that.sku = value.sku;//商品规格
					})	
					
				}
			});
			uni.request({
			    url: Host.ApiGetCouponList.url, //仅为示例，并非真实接口地址。
				method: 'GET',
			    data: {
			        openid: getApp().globalData.openid
			    },
			    success: (res) => {
					console.log(res)
			    }
			});
		},
		methods:{
			gotopage(param){
				// if(!getApp().globalData.LoginStatus){
				// 	this.Is_login_show = true;
				// 	return;
				// }
				if(param == 'ShopCar'){
					uni.navigateTo({
						url:'/pages/goods/shopCar/ShopCar'	// 购物车
					});
					return;
				}
				if(param == 'order_jiesuan'){
					uni.navigateTo({
						url:'/pages/order/order_jiesuan'	// 订单结算
					});
				}
			},
			gotopage_son(){
				uni.navigateTo({
					url:'/pages/zhunxingfuwu/jiarujiahua/jiarujiahua'	// 加入计划
				})
			},
			//规格点击事件 select=1是已经选中的
			ClickChoose(id, sid, index,indexs){
				// 先把一列的选项都置为未选中，然后再修改点击选中的css
				this.sku[index]['son'].map((value, i)=>{
					this.sku[index]['son'][i].select = 0;
				});
					
				this.sku[index]['son'][indexs]['select'] = 1;
				this.s_indexs = indexs;	//选中子样式的index值，显示选中css样式
				this.p_index = index;//选中子样式的index值，显示选中css样式
				
				// 查看用户选择了什么规格
				let parten = this.sku.length;
				var j = 0;
				this.sku.map((value, index)=>{
					value.son.map((v, i)=>{
						if(v.select == 1){
							j++;
							this.seficeName = v.sname;
						}
					})
				});
			},
			//步计器 value：输入框当前值，name：步进器标识符
			valChange(value, name){
				
			},
			// 点击事件的绑定
			clickButton(param){
				if(param == 'ShopCar'){	// 加入购物车点击事件
					let parten = this.sku.length;
					if(parten == this.goods_sku_ids.length){
						uni.showToast({
							title: '已再购物车里啦~',
							icon:'none',
						})
						console.log('家伙');return;
					}
					let that = this;
					this.goods_sku_ids = [];
					var j = 0;
					this.sku.map((value, index)=>{
						value.son.map((v, i)=>{
							if(v.select == 1){
								j++;
								that.goods_sku_ids.push(v.sid);
							}
						})
					});
					if(j < parten){
						uni.showToast({
							title: '请选择规格',
							icon: 'none'
						})
						this.shopCarShow = true;
						this.ShopCarButtonClick = true;
						return;
					}
					this.shopCarShow = false;
					uni.request({
					    url: Host.ApiAddShopCar.url, //仅为示例，并非真实接口地址。
						method: 'GET',
					    data: {
					        // openid: getApp().globalData.openid
					        openid: 1,
							goods_id: that.goods_id,
							sku_price_id: that.goods_sku_ids,
							goods_num: that.buy_number
							
					    },
					    success: (res) => {
							uni.showToast({
								title: '加购成功',
								icon: 'success'
							});
					    }
					});
					console.log(this.goods_sku_ids);
				}
			},
			openShow(param) {
				if(param == 'shopSefic'){
					this.shopCarShow = true;
				}
				if(param == 'counp'){
					this.Is_counp_show = true;
				}
			},
			shopCarShow_button(){
				if(!this.is_login()){
					this.Is_login_show = true;
					return;
				}
				this.shopCarShow = true;
			},
			getUserInfo(res){
				console.log(res)
			}
		}
	}
</script>

<style>
	page{
		background-color: #ECECEC;
	}
	.content{
	  width: 100%;
	  overflow-x:hidden;
	}
	.goods_banner_box{
		background-color: #E8E8E8;
		/* height: 598upx; */
		position: relative;
	}
	.swiper{
		background-color: #E8E8E8;
		height: 598upx;
	}
	.goods_info_box{
		padding: 24upx 30upx 40upx 28upx;
		background-color: #FFFFFF;
		box-sizing: border-box;
	}
	
	.goods_price{

		font-size: 40upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FF5638;
		line-height: 40upx;
	}
	
	.goods_name{

		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 44upx;
		margin-top: 6upx;
	}
	
	.goods_tip_box{
		display: flex;
		justify-content: space-between;
		width: 320upx;
		margin-top: 40upx;
		align-items: center;
	}
	
	.goods_tip_name1{

		width: 154upx;
		height: 40upx;
		/* font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666660; */
		/* line-height: 24upx; */
		/* opacity: 0.5; */
	}
	.goods_tip_name2{
		width: 154upx;
		height: 40upx;
		/* font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666660; */
		/* line-height: 24upx; */
	}
	
	.tip_box{
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		width: 691upx;
	}
	
	.right_icon{
		width: 16upx;
		height: 16upx;
		border-top: 3upx solid #666666;
		border-right: 3upx solid #666666;
		transform: rotate(45deg);
	}
	
	.coupon_box{
		padding: 36upx 30upx 32upx 30upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		margin-top: 24upx;
		box-sizing: border-box;
	}
	.coupon_name{

		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40upx;
	}
	.coupon_ri_name{

		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF5638;
		line-height: 40upx;
		margin-right: 24upx;
	}
	.coupon_right_box{
		display: flex;
		/* justify-content: space-between; */
		/* width: 245upx; */
		align-items: center;
	}
	
	.sefic_box{
		padding: 34upx 30upx 32upx 30upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.sefic_box_bac{
		display: flex;
		align-items: baseline;
	}
	.sefic_name{

		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40upx;
		opacity: 0.5;
	}
	
	.sefic_son_box{
		display: flex;
		justify-content: space-around;
		margin-left: 34upx;
	}
	
	.sefic_size{
		margin-right: 24upx;
	}
	
	.product_box{
		background-color: #FFFFFF;
		padding: 38upx 28upx 36upx 28upx;
		margin-top: 24upx;
		box-sizing: border-box;
		border-radius: 8upx;
	}
	
	.pro_name{

		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 44upx;
	}
	
	.pro_box_sefig{
		margin-top: 26upx;
		padding: 30upx 42upx 6upx 18upx;
		background-color: #F8F8F8;
	}
	
	.pro_sefic_box{
		margin-bottom: 24upx;
		display: flex;
		justify-content: space-between;
		/* background: #007AFF; */
		align-items: center;
	}
	
	.pro_s_name{
		/* height: 72upx; */
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34upx;
		text-align: center;
	}
	.goods_show_name{
		padding-left: 24upx;
		padding-bottom: 24upx;
		background-color: #FFFFFF;
		box-sizing: border-box;
	}
	.zhanwei{
		height: 104upx;
	}
	
	.goto_pay{
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		width: 100%;
		box-sizing: border-box;
		padding-top: 20upx;
		padding-right: 28upx;
		padding-left: 52upx;
		height: 130upx;
		
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}
	
	.goto_pay_button_box{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.shor_car_box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 80upx;
	}
	.car_img_box_kefu{
		width: 40upx;
		height: 40upx;
	}
	.car_img_kefu{
		width: 40upx;
		height: 40upx;
	}
	.car_img_box{
		width: 40upx;
		height: 42upx;
	}
	
	.car_img{
		width: 40upx;
		height: 42upx;
	}
	
	.add_car{
		width: 262upx;
		height: 80upx;
		/* background: #D8D8D8; */
		border: 2upx solid #58BCFF;
		border-radius: 10upx;
		box-sizing: border-box;
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #58BCFF;
		margin-right: 18upx;
		margin-left: 24upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.car_name{

		font-size: 22upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40upx;
	}
	.add_car1{
		width: 488upx;
		height: 80upx;
		/* background: #D8D8D8; */
		border-radius: 10upx;
		background: #58BCFF;
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 24upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.goods_take_box{
		height: 970upx;
		background-color: #FFFFFF;
		padding: 48upx 31upx 0 24upx;
		box-sizing: border-box;
		margin-bottom: 100upx;
	}
	
	.take_g_img_box{
		display: flex;
		/* align-items: baseline; */
	}
	
	.t_g_img_box{
		width: 200upx;
		height: 200upx;
	}
	.t_g_img{
		width: 200upx;
		height: 200upx;
	}
	.t_goods_info_box{
		width: 463upx;
		margin-left: 32upx;
	}
	.close_box{
		display: flex;
		justify-content: flex-end;
		/* background-color: #007AFF; */
		margin-top: 8upx;
	}
	.close_icon{
		display: inline-block;
		width: 30upx;
		height: 4upx;
		background: #333;
		transform: rotate(45deg);
	}
	.close_icon::after {
		content: '';
		display: block;
		width: 30upx;
		height: 4upx;
		background: #333;
		transform: rotate(-90deg);
	}
	
	.t_goods_price{
		margin-top: 38upx;
		font-size: 40upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FF5638;
		line-height: 40upx;
	}
	
	.t_goods_name{
		margin-top: 12upx;
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44upx;
	}
	.t_goods_choose{
		margin-top: 10upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40upx;
	}
	
	.t_size_name{
		margin-top: 48upx;
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 44upx;
	}
	
	.t_size_list{
		display: flex;
		margin-top: 36upx;
	}
	
	.size_name{
		background: #F8F8F8;
		border-radius: 28upx;
		line-height: 48upx;
		padding: 12upx 24upx 12upx 24upx;
		margin-right: 24upx;

		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		
		box-sizing: border-box;
	}
	
	.line{
		width: 750upx;
		height: 4upx;
		background: #D8D8D8;
		opacity: 0.2;
		position: relative;
		margin: 0 auto;
		margin-top: 50upx;
		right: 23upx;
	}
	
	.buy_box{
		margin-top: 48upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.buy_name_box{
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44upx;
	}
	
	.buy_number_box{
		display: flex;
	}
	
	.buy_delete{
		border: 2upx solid #666666;
		width: 40upx;
		height: 44upx;
		text-align: center;
		border-top-left-radius: 8upx;
		border-bottom-left-radius: 8upx;
	}
	.buy_input{
		width: 68upx;
		height: 44upx;
		border: 2upx solid #666666;
		text-align: center;

		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 34upx;
	}
	.buy_add{
		border: 2upx solid #666666;
		width: 40upx;
		height: 44upx;
		text-align: center;
		border-top-right-radius: 8upx;
		border-bottom-right-radius: 8upx;
	}
	
	.buy_toPay_button{
		width: 702upx;
		line-height: 88upx;
		background: #58BCFF;
		border-radius: 8upx;
		text-align: center;
		margin-top: 48upx;

		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

	}
	.car_img_li{
		display: flex;
		align-items: center;
		width: 158upx;
		justify-content: space-between;
	}
	.rig_boxox{
		display: flex;
		align-items: center;
	}
	.tan_modle{
		width: 580upx;
		height: 330upx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	.tan_title{
		height: 232upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44upx;
	}
	.tan_button{
		display: flex;
		justify-content: space-between;
	}
	.counp_list_box{
		margin-left: 16upx;
		width: 720upx;
		height: 208upx;
		/* background-color: #007AFF; */
		padding: 47upx 34upx 42upx 36upx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		
	}
	.counp_box_img{
		width: 720upx;
		height: 208upx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
	.counp_img{
		width: 720upx;
		height: 208upx;
	}
	.counp_text_info_box{
		display: flex;
		justify-content: space-between;
		z-index: 4;
		align-items: center;
		box-sizing: content-box;
	}
	.counp_box_money{
		width: 144upx;
		height: 120upx;
		text-align: center;
		z-index: 5;
	}
	.counp_money{
		width: 90upx;
		height: 90upx;
		/* display: flex;
		align-items: baseline;
		justify-content: center; */
		/* margin-left: 27upx; */
	}
	.money1{
		font-size: 32upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #58BCFF;
	}
	.money2{
		font-size: 76upx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #58BCFF;
	}
	.moeny_text_bac{
		width: 144upx;
		height: 34upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.counp_rig_box_x{
		z-index: 5;
		width: 448upx;
		height: 80upx;
		display: flex;
		justify-content: space-between;
		/* background-color: #007AFF; */
		/* align-items: center; */
	}
	.counp_rig_box_text{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.counp_send_text{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.counp_send_text1{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.counp_buton_box{
		width: 120upx;
		height: 56upx;
		background: #58BCFF;
		border-radius: 30upx;
		
		/* width: 48px;
		height: 24px; */
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.boday_hie{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 34upx;
	}
	.body_dadtitle{
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 50upx;
		margin-bottom: 36upx;
	}
	.button_box_cuinp_c{
		width: 694upx;
		line-height: 96upx;
		background: #58BCFF;
		border-radius: 8upx;
		

		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		margin: 0 auto;
	}
	.cloer_oadha{
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.boday_counfd{
		margin-bottom: 76upx;
	}
	.swiper-item{
		width: 100%;
		height: 598upx;
		overflow-x: hidden;
	}
	.swiper-img{
		width: 100%;
		height: 598upx;
		overflow-x: hidden;
	}
	.contasda{
		margin-bottom: 20upx;
	}
	.tianImg{
		width: 154upx;
		height: 40upx;
	}
	.quanImg{
		width: 154upx;
		height: 40upx;
	}
	.size_name_choose{
		background-color: #F2FAFF;
		border: 1upx solid #6EC5FF;
		box-sizing: border-box;
	}
</style>
